<%-- 
    Document   : viewAlbum
    Created on : Oct 30, 2012, 4:40:37 PM
    Author     : tinvukhac
--%>
<%@page import="Objects.User"%>
<%@page import="Objects.Comment"%>
<%@page import="Objects.Image"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="Ultility.Ultility" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>My Photos</title>
        <link rel="stylesheet" type="text/css" href="<%= request.getContextPath()%>/css/styles.css"/>
        <script type="text/javascript" src="<%= request.getContextPath()%>/js/jquery-1.7.min.js"></script>
        <script type="text/javascript" src="<%= request.getContextPath()%>/js/expandsetting.js"></script>
        <style type="text/css">
            #content{width: 100%;overflow: hidden;float: left;}
            .context-display{margin-top: 5px;font-size: 14px;}
            #left-view{
                padding-left: 10px;
                float: left;
                width: 75%;                
                padding-bottom: 4000px;
                margin-bottom: -4000px;
            }
            #right-view{
                padding-left: 10px;
                float: left;
                width: 23%;                
                padding-bottom: 4000px;
                margin-bottom: -4000px;
                background-color: #F3F3F3;                
                margin-right: -2px;
                border-left: 2px solid #DDDDDD;
                padding-top: 10px;
                font-size: 16px;
                overflow: hidden;
                display: block;
                text-align: justify;

            }
            #view-img{width: 850px;margin: 0 auto;overflow: hidden;}
            #back-button{width: 24px;float: left;overflow: hidden;}
            #view-photo{float: left;overflow: hidden;padding: 20px;}
            #next-button{width: 24px;float: left;overflow: hidden;}
            #view-photo img{margin-bottom:10px; width: 700px;height: 440px;}
            #back-button a{}
            #next-button a{}
        </style>
    </head>

    <body>
        <!-----------------------HEADER------------------------------------------------->
        <div id="wraper">
            <div id="top">
                <div id="account-bar">
                    <div class="setting space">
                        <a class="bgspace" href="#">
                            <img src="<%= request.getContextPath()%>/images/setting.png" />
                        </a>
                    </div>
                    <% String thumbnailProfileFileName=(String)request.getAttribute("thumbnailProfileFileName");%>
                    <div class="icon space">
                        <a class="bgspace" href="">
                            <%if(thumbnailProfileFileName==null){%>
                                       <img width="26" height="26" src="<%=  request.getContextPath() %>/profile/getThumb.htm?getthumb=defaultAvatar.jpg&size=26" />
                                   <%} else{ 
                                       String path=request.getContextPath() + "/profile/getThumb.htm?getthumb="+thumbnailProfileFileName+"&size=26";%>
                                   %>
                                       <img width="26" height="26" src="<%= path %>" />
                                   <%}%>
<!--                            <img src="<%= request.getContextPath()%>/images/icon.png"/>-->
                        </a>
                    </div>
<!--                    <a href="Profile.html" class="userName"></a>-->
                    <a class="userName">${userName}</a>
                </div>
                        <div class="expand-setting">
	    <div class="expand-sub">
		<div class="expand-hover">
                    <a href="<%= request.getContextPath() %>/profile/profile.htm">Account Settings</a>
       	        </div>
            <div class="clear"></div>
        <div class="clear line" style="margin:5px 0;"></div>
       	<div class="expand-hover">
            <a href="<%= request.getContextPath() %>/login/logoutAction.htm">Log out</a>
        </div>
	</div>
        </div>
                <div class="clear"></div>

                <div class="banner" style="background:url(<%= request.getContextPath()%>/images/bg00.png) repeat-x left">
                    <div class="logo">
                        <img src="<%= request.getContextPath()%>/images/logo1.png" />
                    </div>
                    <div class="top-tab">
                        <div class="top-tab-active">
                            <div class="top-tab-txt">
                                <a href="<%= request.getContextPath() %>/myphoto/myPhoto.htm"> My Photos</a>
                            </div>
                        </div>
                    </div>
                    <div class="top-tab">
                        <div class="top-tab-inactive">
                            <div class="top-tab-txt">
                                <a href="Explore.html"> Explore</a>
                            </div>
                        </div>
                    </div>

                    <div class="upload">
                        <a href="<%= request.getContextPath() %>/upload/startupload.htm">Upload</a>
                    </div>

                    <div class="search">
                        <div class="search-form">
                            <form id="search-form" method="get" action="/lh/view" name="search-form">
                                <input id="search" type="text" value="" maxlength="128" size="25" name="q" />
                                <input class="search-button" type="submit" value="Search"/>
                            </form>
                        </div>
                    </div>
                </div>
            </div><!--end of top -->
            <%
                User currentUser = (User) request.getAttribute("currentUser");
                List imageList = new ArrayList();
                imageList = (List) request.getAttribute("imageList");
                int imageIndex = (Integer) request.getAttribute("imageIndex");
                String albumId = (String) request.getAttribute("albumId");
                String albumName = (String) request.getAttribute("albumName");
                Image tempImage = (Image) imageList.get(imageIndex);
                List<Comment> commentList = (List) request.getAttribute("commentList");
                int tempIndex;
            %>
            <div id="content">
                <div id="left-view">
                    <div class="context-display" style="margin-bottom:5px;">
                        <img src="<%= request.getContextPath()%>/images/tbnRecent.png">                                                                      
                            <a class="text-view" href="<%= request.getContextPath()%>/login/myPhoto.htm">My Photos</a>
                            <span class="separator">></span>
                            <a class="albums-name" href="<%= request.getContextPath() + "/myphoto/viewAlbum.htm?albumId=" + albumId%>"><%= albumName%></a>
                            <span class="separator">></span>
                            <span style="font-family:Arial, Helvetica, sans-serif; font-size:14px;">Photo <%= (imageIndex + 1)%> of <%= imageList.size()%></span>
                    </div>
                    <div class="clear line"></div>
                    <div id="view-img">
                        <div style="text-align: center; position: relative; float:left; margin-top:250px;">
                            <%
                                tempIndex = imageIndex - 1;
                                if (tempIndex >= 0) {
                            %>
                            <a href="<%= request.getContextPath() + "/myphoto/viewImage.htm?albumId=" + tempImage.getAlbumId() + "&imageIndex=" + (imageIndex - 1)%>">
                                <img src="<%= request.getContextPath()%>/images/back.png" />
                            </a>
                            <%}%>
                        </div>  
                        <div id="view-photo">
                            <img src="<%= request.getContextPath() + tempImage.getLink()%>" />
                            <br />
<!--                            <a href="#">Add a caption</a>-->
                            <div class="clear"></div>
                            <div class="form-edit" style="margin-left:150px; display:none">
                                <div>
                                    <textarea name="description" rows="1" cols="1" style="float:left; width:400px;"></textarea>
                                </div>
                                <div class="clear"></div>
                                <div class="edit-button button-red">Save</div>
                                <div class="edit-button">Cancel</div>
                            </div>
                        </div>
                        <div id="next-button">
                            <div style="text-align: center; position: relative; float:left; margin-top:250px;">
                                <%
                                    tempIndex = imageIndex + 1;
                                    if (tempIndex < imageList.size()) {
                                %>
                                <a href="<%= request.getContextPath() + "/myphoto/viewImage.htm?albumId=" + tempImage.getAlbumId() + "&imageIndex=" + (imageIndex + 1)%>">
                                    <img src="<%= request.getContextPath()%>/images/next.png" />
                                </a>
                                <%}%>
                            </div>                            
                        </div>
                    </div>
                    <div class="clear line"></div>
                    <%
                        for (int i = 0; i < commentList.size(); i++) {
                            Comment tempComment = (Comment) commentList.get(i);
                    %>
                    <div class="comment" align="left";>
                        <div class="contact" style="width:200px; float:left;">
                            <div class="avatar">
                                <% int userId=tempComment.getUser().getUserId();
                                  Ultility ultility=new Ultility();
                                   String fileName=ultility.getFileNameAvatar(userId);
                                if(fileName==null){%>
                                                 <img width="32" height="32" src="<%=  request.getContextPath() %>/profile/getThumb.htm?getthumb=defaultAvatar.jpg&size=32" />
                                                 <%} else{ 
                                                    String path=request.getContextPath() + "/profile/getThumb.htm?getthumb="+fileName+"&size=32";%>
                                                 %>
                                                 <img width="32" height="32" src="<%=  path %>" />
                                                   <%}%>
<!--                                <img width="20" height="25" src="<%= request.getContextPath() + tempComment.getUser().getAvatar()%>" />-->
                            </div>
                            <div class="name" style="margin-left:40px; width:150px;">
                                <a href="Profile.html" style="font-weight:normal;"><%= tempComment.getUser().getUserName()%></a>
                                <br />
                                <a href="#" style="font-weight:normal;"> Photos</a>
                                <div style="margin-left:5px; font-family:Arial, Helvetica, sans-serif; font-size:12px;"><%= tempComment.getTime()%></div>
                            </div>
                        </div>
                        <div class="cmted-frame">
                            <p style="font-family:Arial, Helvetica, sans-serif; color:#000000; font-size:13px; margin-top:0;">
                                <%= tempComment.getContents()%>
                            </p>
                            <a href="#" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;color:#3964C2; text-decoration:none;">
                                Like
                            </a>
                            |
                            <%
                                if(!tempComment.isIsDislikeByCurrentUser()){
                            %>
                            <a href="<%= request.getContextPath()%>/myphoto/reportComment.htm?commentId=<%= tempComment.getCommentId() %>&userId=<%= currentUser.getUserId() %>&albumId=<%= albumId %>&imageIndex=<%= imageIndex %>" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;color:#3964C2; text-decoration:none;">
                                Dislike
                            </a>
                            <%}%>
                        </div>                   
                    </div>
                    <%
                        }
                    %>

                    <div class="clear line"></div>
                    <div class="comment" align="left";>
                        <div class="contact" style="width:200px; float:left;">
                            <div class="avatar">
                                <% 
                                   if(thumbnailProfileFileName==null){%>
                                       <img width="32" height="32" src="<%=  request.getContextPath() %>/profile/getThumb.htm?getthumb=defaultAvatar.jpg&size=32" />
                                   <%} else{ 
                                       String path=request.getContextPath() + "/profile/getThumb.htm?getthumb="+thumbnailProfileFileName+"&size=32";%>
                                   %>
                                       <img width="32" height="32" src="<%= path %>" />
                                   <%}%>
                            </div>
                            <div class="name" style="margin-left:40px; width:150px;">
<!--                            <a href="Profile.html" style="font-weight:normal;"><%= currentUser.getUserName()%></a>-->
                                <a  style="font-weight:normal;"><%= currentUser.getUserName()%></a>
                                <br />
<!--                                <a href="#" style="font-weight:normal;"> Photos</a>-->
                                <a style="font-weight:normal;"> Photos</a>
                                <% Ultility ultility=new Ultility(); %>
                                <div style="margin-left:5px; font-family:Arial, Helvetica, sans-serif; font-size:12px;"><%= ultility.getCurrentTime() %></div>
                            </div>
                        </div>
                        <div class="cmt-frame">
                            
                            <form action="<%= request.getContextPath()%>/myphoto/postComment.htm?imageId=<%= tempImage.getImageId() %>&userId=<%= currentUser.getUserId() %>&albumId=<%= albumId %>&imageIndex=<%= imageIndex %>" method="post">                               
                                <textarea class="input" rows="2" id="comment" name="comment" style="width:600px;">Add a comment ... </textarea>
                                <div class="clear"></div>
                                <input id="post" name="post" type="submit" value="Post" style="margin-top:10px; float:right;">
                            </form>
                        </div>
                    </div>
                    <div class="clear line"></div>    
                </div>
                <div id="right-view">
                    <div class="contact">
                        <div class="avatar">
                            <% if(thumbnailProfileFileName==null){%>
                                                 <img width="32" height="32" src="<%=  request.getContextPath() %>/profile/getThumb.htm?getthumb=defaultAvatar.jpg&size=32" />
                                                 <%} else{ 
                                                    String path=request.getContextPath() + "/profile/getThumb.htm?getthumb="+thumbnailProfileFileName+"&size=32";%>
                                                 %>
                                                 <img width="32" height="32" src="<%=  path %>" />
                                                   <%}%>
                        </div>
                        <div class="name">
                            <a href="request.getContextPath()%>/myphoto/myPhoto.htm">${userName}</a>
                         <br />
                            <a href="request.getContextPath()%>/myphoto/myPhoto.htm"> Photos</a>
                        </div>
                    </div>
                    <div class="context-box-right">
                        <span> Photo infomation </span>
                    </div>
                            <% String name=tempImage.getImageName();
                             if(name != null){%>
                                <div class="photo-info">Name:<%= tempImage.getImageName() %></div>
                            <%} else{ %>
                                <div class="photo-info">Name:</div>
                            <%}%>
                            <br/>
                            <% String tag=tempImage.getTag();
                             if(tag !=  null){%>
                                <div class="photo-info">Tag:<%= tempImage.getTag() %></div>
                            <%} else{ %>
                                <div class="photo-info">Tag:</div>
                            <%}%>
                    
                </div>
            </div><!--end of content -->
            <div id="footer">
                <p id="copyright"> Powered by 4nSE, SE K53, Hanoi University of Science and Techonogy.</p>
            </div><!--end of footer -->
        </div>
    </body>
</html>